<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
    <span id="sp"><font color="red">健哥最帅!</font></span>

    <p>窗前明月光</p>
    <p>疑似地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>


    姓名: <input type="text" name="username" value="张三"/> <br>
    <button type="button" id="show1">显示</button>
    <button type="button" id="hide1">隐藏</button><br>
    <button type="button" id="delete">删除</button><br>


<a href="http://www.baidu.com">跳转到百度</a>

    <script type="text/javascript">
        $(function(){
            //alert("这是jquery的hello word!");
            //通过id获取元素
            //alert($("#sp").text());
            //标签元素选择器
            //alert($("span").text());

            //隐藏所有p标签的元素
            //$("p").hide();

            //当鼠标单击button按钮的时候触发这个方法
            // $("#show1").click(function(){
            //     //显示所有p标签元素
            //     $("p").show();
            // });
            //
            // //当鼠标单击hide1这个元素的时候, 触发这个方法
            // $("#hide1").click(function(){
            //     //隐藏p标签
            //     $("p").hide();
            // });

            //获取表单元素的value值
            //alert($("[name='username']").val());

            //获取p标签中的文本内容
            //alert($("p").text());

            //获取p标签的html整个元素
            //$("#sp").html("<font color='#7fff00'>中国</font>");

            //更改a标签中href属性的内容
            $("a").attr("href", "http://www.jd.com");
            $("a").text("跳转到京东");

            //姓名输入框的内容改变事件
            $("[name='username']").change(function(){
                alert("姓名输入框的内容改变了!");
            });

            //显示
            $("#show1").click(function(){
                //淡入, 慢慢的显示出来
                $("p").fadeIn("slow");
            });

            //隐藏
            $("#hide1").click(function(){
                //淡出, 慢慢的隐藏
                $("p").fadeOut("slow");
            });

            //点击删除按钮, 删除span元素
            $("#delete").click(function(){
                $("#sp").remove();
            });

        });

    </script>
</body>
</html>